/*
* @Author: Ljh
* @Date:   2016-11-10 23:51:30
* @Last Modified by:   Ljh
* @Last Modified time: 2016-11-12 19:59:06
*/
$(function(){
	FastClick.attach(document.body);

    if (typeof Stars == "undefined") {
        var Stars = {};
    }
    Stars.testResult_gradeOne = {
        init: function () {
            var that = this;
            //*测试结果滑动效果
            that.touch_slide();
        },
        touch_slide: function (){
            var that = this;
            //需要滑动的盒子
            var slideBox = document.querySelector('#slideBox');
            //内部单个盒子
            var singleBox = slideBox.querySelector('li');
            var singleBox_width = singleBox.offsetWidth;

            //跟随滑动的盒子
            var slideFollow = document.querySelector('#slideFollow');
            var navBoxs = slideFollow.querySelectorAll('li');
            var singleNav = slideFollow.querySelector('li');
            var singleNav_width = singleNav.offsetWidth;

            var index = 0;
            var startX = 0;
            var moveX = 0;
            var distanceX = 0;//改变的距离

            var isMove = false;  //记录用户是否滑动过

            slideBox.addEventListener('touchstart', function (e) {
                //记录开始位子的坐标
                startX = e.touches[0].clientX;
            });
            slideBox.addEventListener('touchmove', function (e) {
                //记录滑动的时候的x的坐标
                moveX = e.touches[0].clientX;
                //计算滑动的距离  数值 可以为负也可以为正
                distanceX = moveX - startX;
                //在滑动的时候盒子也跟着滑动
                //清除过渡
                that._removeTransition(slideBox);
                //定位
                that._setTranslateX(-index*singleBox_width+distanceX, slideBox );//滑动的位置等于当前的定位加上改变的距离

                isMove = true;
            });
            window.addEventListener('touchend',function(e){

                if(Math.abs(distanceX) > width/5 && isMove){
                    //超过了一定的距离  需要跳转上一张或下一张
                    if(distanceX>0){
                        if(index>0){
                            index --;//上一张
                        }
                    }else{
                        if(index<8){
                            index ++;//下一张
                        }
                    }
                    //加过渡
                    that._addTransition(slideBox);
                    //定位
                    that._setTranslateX(-index*singleBox_width, slideBox);
                }else{
                    //不超过一定的距离需要吸附回去
                    //加过渡
                    that._addTransition(slideBox);
                    //定位
                    that._setTranslateX(-index*singleBox_width, slideBox);
                }

                //重置参数
                startX = 0;
                moveX = 0;
                distanceX = 0;
                isMove = false;
            });
            //3.nav对应项背景改变
            var changeBg = function(){
                //清除当前样式
                for(var i = 0 ; i < navBoxs.length ; i ++){
                    navBoxs[i].classList.remove('current');
                }
                //给对应的加上样式
                navBoxs[index].classList.add('current');
                //定位
                that._addTransition(slideFollow);
                that._setTranslateX(-index*singleNav_width, slideFollow );
            }
            //监听过渡结束事件
            that._slide_transitionEnd(slideBox, function(){
                changeBg();
            });
        },
        //加过渡
        _addTransition: function(){
            for(var i = 0; i < arguments.length; i++){
                arguments[i].style.webkitTransition = 'all 0.3s';//兼容性
                arguments[i].style.transition = 'all 0.3s';
            }
        },
        //清除过渡
        _removeTransition: function(){
            for(var i = 0; i < arguments.length; i++){
                arguments[i].style.webkitTransition = 'none';
                arguments[i].style.transition = 'none';
            }
        },
        //定位 args:DOM对象或数组
        _setTranslateX: function(translateX, args){
            if( args instanceof Array ){
                for(var i = 0; i < args.length; i++){
                    args[i].style.webkitTransform = 'translateX('+translateX+'px)';
                    args[i].style.transform = 'translateX('+translateX+'px)';
                }
            }else{
                args.style.webkitTransform = 'translateX('+translateX+'px)';
                args.style.transform = 'translateX('+translateX+'px)';
            }
        },
        //解决兼容性问题封装
        _slide_transitionEnd: function (dom,callback){
            if(!dom || typeof dom != 'object' ) return false;
            dom.addEventListener('transitionEnd',function(){
                //处理业务
                callback && callback();
            });
            dom.addEventListener('webkitTransitionEnd',function(){
                //处理业务
                callback && callback();
            });
        }

    };
    Stars.testResult_gradeOne.init();

});
